import { modelDeploy, modelUpdateState, modelDelete, modelList } from "@/api/bpm/model";
import { BasicColumn, BasicTable, FormSchema, useTable } from "@/components/Table";
import Toolbar from "@/components/ViewComponents/Toolbar";
import { Button, Avatar, Tooltip, Tag, Popconfirm, message, Dropdown, Menu } from "antd";
import "./index.less";
import { formatDate } from "@/utils/util";
import { useNavigate } from "react-router-dom";
import CreateAndUpdata from "./components/createAndUpdata";
import History from "./components/history";
import { useDrawer } from "@/components/Drawer";
import { useTranslation } from "react-i18next";
import Icon from "@/components/Icon";
import { IconEnum } from "@/enums/appEnum";
const { Item } = Menu;
const index = () => {
	const { t } = useTranslation();
	const en_vi = "task.model";
	const navigate = useNavigate();
	const schemas: FormSchema[] = [
		{
			label: t(`${en_vi}.processName`),
			field: "name",
			component: "Input"
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t(`${en_vi}.processName`),
			dataIndex: "name",
			width: 150,
			render: (text: any, record: any) => {
				return (
					<div className="name flex">
						<Avatar src={record.icon} />
						<p>{text}</p>
					</div>
				);
			}
		},
		{
			title: t(`${en_vi}.visibleRange`),
			dataIndex: "startUsers",
			render: (startUsers: any) => {
				if (startUsers.length == 0) return t(`${en_vi}.allVisible`);
				let name = "";
				startUsers.forEach((item: any, index: number) => {
					if (startUsers.length - 1 === index) {
						name += item.nickname;
					} else {
						name += item.nickname + "、";
					}
				});
				return (
					<Tooltip title={name}>
						{startUsers[0].nickname}
						{startUsers.length}
						{t(`${en_vi}.peopleVisible`)}
					</Tooltip>
				);
			}
		},
		{
			title: t(`${en_vi}.formInfo`),
			dataIndex: "formCustomCreatePath",
			render: (formCustomCreatePath: any) => {
				return (
					<Button
						type="link"
						onClick={() => {
							navigate(formCustomCreatePath);
						}}
					>
						{formCustomCreatePath}
					</Button>
				);
			}
		},
		{
			title: t(`${en_vi}.lastRelease`),
			dataIndex: "processDefinition",
			render: (time: any, record: any) => {
				if (!time) return <Tag color="warning">{t(`${en_vi}.notDeployed`)}</Tag>;

				return (
					<div>
						{formatDate(new Date(time.deploymentTime))} <Tag color="processing">V{record.processDefinition.version}</Tag>
					</div>
				);
			}
		},
		{
			title: t(`${en_vi}.operations`),
			render: (_, record) => {
				return (
					<div>
						<Button type="link" onClick={update(record)}>
							{t(`${en_vi}.edit`)}
						</Button>
						<Button type="link" onClick={() => handleDesign(record)}>
							{t(`${en_vi}.design`)}
						</Button>
						<Popconfirm
							placement="bottomRight"
							title={t(`${en_vi}.confirmDeployment`)}
							onConfirm={releaseProcess(record)}
							okText="Yes"
							cancelText="No"
						>
							<Button type="link">{t(`${en_vi}.release`)}</Button>
						</Popconfirm>
						<Dropdown overlay={menu(record)}>
							<Button type="link">
								{t(`${en_vi}.more`)} <Icon icon={IconEnum.ARROW_DOWN} />
							</Button>
						</Dropdown>
					</div>
				);
			}
		}
	];
	const menu = (record: any) => {
		return (
			<Menu>
				<Item>
					<Button type="link" onClick={historyFn(record)}>
						{t(`${en_vi}.history`)}
					</Button>
				</Item>
				<Item>
					<Popconfirm
						placement="bottomRight"
						title={t(`${en_vi}.confirmSuspend`)}
						onConfirm={suspensionProcess(record)}
						okText="Yes"
						cancelText="No"
					>
						<Button type="link"> {t(`${en_vi}.suspend`)}</Button>
					</Popconfirm>
				</Item>
				<Item>
					<Popconfirm
						placement="bottomRight"
						title={t(`${en_vi}.confirmDelete`)}
						onConfirm={deleteFn(record)}
						okText="Yes"
						cancelText="No"
					>
						<Button type="link">{t(`${en_vi}.delete`)}</Button>
					</Popconfirm>
				</Item>
			</Menu>
		);
	};
	const [register, { reload }] = useTable({
		api: modelList,
		columns,
		useSearchForm: true,
		formConfig: {
			labelWidth: 150,
			schemas,
			showActionButtonGroup: true,
			baseColProps: { span: 7 },
			actionColOptions: { span: 24 }
		},
		bordered: true
	});
	const [registerDrawer, { openDrawer }] = useDrawer();
	const [historyRegisterDrawer, { openDrawer: historyOpenDrawer }] = useDrawer();
	const handlerToolbarAction = (key: string) => {
		console.log(key);
		switch (key) {
			case "add":
				openDrawer(true, {
					reload
				});
				break;
		}
	};
	const update = (record: any) => () => {
		openDrawer(true, {
			reload,
			record
		});
	};
	//发布流程

	const releaseProcess =
		({ id }: any) =>
		async () => {
			const res = await modelDeploy({
				id
			});
			if (!res) return message.error(t(`${en_vi}.operationFailure`));
			message.success(t(`${en_vi}.operationSuccess`));
			reload();
		};
	//历史

	const historyFn = (record: any) => () => {
		historyOpenDrawer(true, { record });
	};
	//停用流程
	const suspensionProcess =
		({ id }: any) =>
		async () => {
			console.log(id);
			const res = await modelUpdateState({
				id,
				state: 2
			});
			if (!res) return message.error(t(`${en_vi}.operationFailure`));
			message.success(t(`${en_vi}.operationSuccess`));
			reload();
		};
	//删除流程
	const deleteFn =
		({ id }: any) =>
		async () => {
			console.log(id);
			const res = await modelDelete({
				id
			});
			if (!res) return message.error(t(`${en_vi}.operationFailure`));
			message.success(t(`${en_vi}.operationSuccess`));
			reload();
		};
	// 设计流程
	const handleDesign = (record: any) => {
		navigate("/bpm/manager/model/edit", {
			state: { modelId: record.id }
		});
	};
	return (
		<div className="page model">
			<div className="page-content">
				<BasicTable register={register}></BasicTable>
			</div>
			<CreateAndUpdata register={registerDrawer}></CreateAndUpdata>
			<History register={historyRegisterDrawer}></History>
			<Toolbar action={handlerToolbarAction} btnList={["add"]} />
		</div>
	);
};
export default index;
